<template>
  <div class="all">
    <el-row>
      <!-- 左侧设备树 -->
      <el-col :span="4">
        <div class="tree">
          <el-input placeholder="输入关键字进行过滤" clearable v-model="filterText">
          </el-input>
          <el-tree @node-click="handleNodeClick" class="filter-tree" :data="engData" :props="defaultProps"
            :filter-node-method="filterNode" ref="tree">
          </el-tree>
        </div>
      </el-col>

      <!-- 右侧图表展示 -->
      <el-col :span="20">
        <div v-if="params.device_id" class="table">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="head">
            <el-tab-pane label="tsp" name="first"></el-tab-pane>
            <el-tab-pane label="pm10" name="second"></el-tab-pane>
            <el-tab-pane label="pm2.5" name="third"></el-tab-pane>
            <el-tab-pane label="温度" name="fourth"></el-tab-pane>
            <el-tab-pane label="湿度" name="fifth"></el-tab-pane>
          </el-tabs>
          <div>
            <div ref="chart" class="chart-area"></div>
          </div>
        </div>
        <div v-else style="line-height: 50px;color: red;font-size: 20px;text-align: center;">请点击设备查看数据</div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import { Area } from "@antv/g2plot";
import moment from 'moment';

export default {
  data() {
    return {
      filterText: "",
      engData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      activeName: 'first',
      params: {
        page: 1,
        pageSize: 150, // 增加数据量可以获得更流畅的曲线
      },
      type: 'tsp',
      area: null,
      myData: []
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    // 当设备参数变化时重新加载数据
    params: {
      deep: true,
      handler() {
        if (this.params.device_id) {
          this.loadMydata();
        }
      }
    },
    // 当监测类型变化时重新绘制图表
    type() {
      if (this.params.device_id && this.myData.length > 0) {
        this.loadArea();
      }
    }
  },
  methods: {
    // 获取树形数据
    async loadEngData() {
      let res = await get("/engineer/findEngineerDeviceTree");
      console.log(res, '88888');
      // 使用空数组作为默认值，防止数据不存在导致的问题
      this.engData = res.data || [];
    },
    // 树形节点点击处理
    handleNodeClick(data) {
      if (!data.children) {
        // 点击的是设备节点  保留原有属性 添加设备id 工程id
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id,
        };
      }
    },
    // 树形过滤方法  data是树形结构的数据
    filterNode(value, data) {
      if (!value) return true;
      // value输入框输入的值  
      // 返回包含输入框关键字的label(节点)
      return data.name.indexOf(value) !== -1;
    },
    // 创建面积图
    loadArea() {
      // 销毁之前图表
      if (this.area) {
        this.area.destroy();
      }

      // 根据当前类型获取对应的颜色配置
      const colorConfig = {
        'tsp': '#c299cd',
        'pm10': '#5cb3cc',
        'pm25': '#a5d6d0',
        'temperature': '#f9cb8b',
        'humidity': '#eea2a4'
      };

      // 创建新图表
      this.area = new Area(this.$refs.chart, {
        data: this.myData,
        xField: 'time',
        yField: this.type,
        color: colorConfig[this.type],
        // 配置X轴
        xAxis: {
          label: {
            style: {
              fill: "#333",
              fontSize: 12
            }
          }
        },
        // 配置Y轴
        yAxis: {
          label: {
            style: {
              fill: "#333",
              fontSize: 12
            }
          }
        },
        // 数据标签样式
        label: {
          style: {
            fill: "#666",
            fontSize: 12
          }
        },
        // 平滑曲线
        // smooth: false,
      });

      this.area.render();
    },
    // 加载监测数据
    async loadMydata() {

      const temp = {
        ...this.params
      };

      let res = await get('/monitor/pageQueryTodayData', temp);
      console.log(res, '------');
      let processedData = [];
      (res.data.list || []).forEach((item, index) => {
        // 处理时间格式
        const formattedTime = moment(item.insert_time).format("HH:mm");

        // 每隔一定数量的数据取一条，避免数据过于密集
        if (index % 5 === 0) {
          processedData.push({
            time: formattedTime,
            tsp: parseInt(item.tsp) || 0,
            temperature: parseInt(item.temperature) || 0,
            pm10: parseInt(item.pm10) || 0,
            pm25: parseInt(item.pm25) || 0,
            humidity: parseInt(item.humidity) || 0,
          });
        }
      });

      this.myData = processedData;

      // 数据加载完成后绘制图表
      this.loadArea();

    },
    // 标签页点击处理
    handleClick(tab) {
      const map = {
        'tsp': 'tsp',
        'pm10': 'pm10',
        'pm2.5': 'pm25',
        '温度': 'temperature',
        '湿度': 'humidity'
      };
      this.type = map[tab.label];  // 根据标签文字更新type
    }
  },
  created() {
    this.loadEngData();
  },
};
</script>

<style scoped>
.tree {
  height: calc(100vh - 60px);
  border-right: 1px solid #ececec;
  padding: -10px;
}

.table {
  padding-left: 20px;
}

.head {
  margin-bottom: 20px;
}
</style>
